<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul {
            width: 800px;
            margin: 0 auto;
            list-style-type: none;
            overflow: hidden;
        }
        
        ul li {
            float: left;
            margin-right: 28px;
            border: 1px solid #aaa;
        }
        
        ul li.active {
            border: 1px solid #0ff;
        }
        
        #mov {
            position: absolute;
            width: 200px;
            height: 200px;
            display: none;
        }
    </style>
    <script>
        window.onload = function() {
            var oLi = document.getElementsByTagName("li");
            var mov = document.getElementById("mov");
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].index = i;
                oLi[i].onmouseover = function(ev) {
                    this.className = "active";
                    var oImg = document.createElement("img");

                    var img = new Image();
                    img.src = oImg.src = oLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg", "_big.jpg");
                    mov.appendChild(oImg);
                    mov.style.display = "block";
                };

                oLi[i].onmousemove = function(ev) {
                    var oEvent = ev || event;
                    var oP = document.getElementsByTagName("p")[0];
                    var x = oEvent.clientX;
                    var y = oEvent.clientY;
                    oP.innerHTML = x + "," + y;
                    mov.style.left = x + 10 + "px";
                    mov.style.top = y + 10 + "px";

                }
                oLi[i].onmouseout = function() {
                    this.className = "";
                    mov.style.display = "";
                    mov.removeChild(mov.lastChild);
                };
            }
        }
    </script>
</head>

<body>
    <ul>
        <li><img src="./img衣服/1.jpg" alt=""></li>
        <li><img src="./img衣服/2.jpg" alt=""></li>
        <li><img src="./img衣服/3.jpg" alt=""></li>
        <li><img src="./img衣服/4.jpg" alt=""></li>
    </ul>
    <div id="mov"></div>
    <p></p>
</body>

</html>